var modal = document.getElementById("myModal");
var modalText = modal.querySelector(".modal-content p");
var modalOverlay = document.getElementById("modalOverlay");
var buttons = document.querySelectorAll('.button-jump');
buttons.forEach(function(button) {
    button.onclick = function() {
        var detailContent = this.getAttribute('data-content');
        showModal(detailContent);
    };
});
function showModal(detailContent) {
    modalText.innerHTML = detailContent;
    modalOverlay.style.display = "block";
    modal.style.display = "block";
    modal.style.opacity = 0; 
    modal.style.transform = 'translate(-50%, -50%) translateX(-100%)'; 
    setTimeout(function() {
        var currentOpacity = 0;
        var interval = setInterval(function() {
            currentOpacity += 0.05;
            if (currentOpacity >= 1) {
                currentOpacity = 1;
                modal.style.transform = 'translate(-50%, -50%)'; 
                clearInterval(interval);
            }
            modal.style.opacity = currentOpacity;
            modal.style.transform = 'translate(-50%, -50%) translateX(' + (1 - currentOpacity) * 100 + '%)';
        }, 5); 
    }, 10);
}
function hideModal() {
    var currentOpacity = 1;
    var interval = setInterval(function() {
        currentOpacity -= 0.05;
        if (currentOpacity <= 0) {
            currentOpacity = 0;
            modal.style.display = "none";
            modalOverlay.style.display = "none";
            clearInterval(interval);
        }
        modal.style.opacity = currentOpacity;
    }, 1); 
}
modalOverlay.onclick = function() {
    hideModal();
}
modal.addEventListener('click', function(event) {
    event.stopPropagation(); 
});